<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/video.css">

<body>
    <div class="wrap">
        <!-- 头部start -->
        <div class="home_top">
            <div class="logo_cont">
                <a class="logo_img" href="./index.html">
                    <img src="../images/logo.png" alt="LOGO">
                </a>
                <div class="logo_title">
                    <h1>王者荣耀</h1>
                    <p>王者相见，打成一片</p>
                </div>
            </div>
            <div class="download">
                <a href="#"></a>
            </div>
        </div>

        <!--中间内容部分-->
        <div class="content">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper" style="transform: translate3d(-375px, 0px, 0px); transition-duration: 0ms;">
                    <div class="swiper-slide swiper-slide-prev" style="width: 375px;">
                        <img src="../picture/video1.jpg" alt="王者猴教学">
                        <h2>【王者荣耀】04干将三百里开外射爆敌方！</h2>
                    </div>
                    <div class="swiper-slide swiper-slide-active" style="width: 375px;">
                        <img src="../picture/video2.jpg" alt="KPL战报">
                        <h2>【鱼嘴滑舌】第54期鬼谷子为你的生活添点喜</h2>
                    </div>
                    <div class="swiper-slide swiper-slide-next" style="width: 375px;">
                        <img src="../picture/video3.jpg" alt="芈月英雄专题">
                        <h2>《科敌制胜》新版芈月强势塔杀，不死套路得人心</h2>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <!--<div class="swiper-pagination"></div>-->
            </div>
            <!-- 视频列表 -->
            <div class="video_cont">
                <!--视频导航-->
                <div class="video_nav">
                    <ul>
                        <li class="video_current">
                            <a href="javascript:;">赛事</a>
                            <span class="video_nbg"></span>
                        </li>
                        <li class="">
                            <a href="javascript:;">英雄</a>
                            <span class="video_nbg"></span>
                        </li>
                        <li class="">
                            <a href="javascript:;">解说</a>
                            <span class="video_nbg"></span>
                        </li>
                        <li class="">
                            <a href="javascript:;">娱乐</a>
                            <span class="video_nbg"></span>
                        </li>
                        <li class="">
                            <a href="javascript:;">官方</a>
                            <span class="video_nbg"></span>
                        </li>
                    </ul>
                </div>
                <!--视频列表-->
                <div class="list_cont">
                    <ul class="video_list clearfix">
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                        <li>
                            <a href="#" title="【KPL预选赛】第1周 LGD 0-2 GK 第1场">
                                            <img src="../images/video_list.png">
                                            <span class="ico_play"></span>
                                            <span class="video_title">【KPL预选赛】第1周 LGD 0-2 GK 第1场</span>
                                        </a>
                            <div class="v_infor">
                                <span class="v_num">
                                            <span class="ico_video_num"></span>1.4万
                                </span>
                                <span class="v_time">06-23</span>
                            </div>
                        </li>
                    </ul>
                    <div class="video_more" id="video_more">
                        <a href="javascript:;" title="点击查看更多" onclick="alert('请后台哥哥给我多点数据~')">点击查看更多</a>
                    </div>
                </div>
                <!-- 视频站内容结束-->

            </div>

        </div>

        <!-- 底部导航start -->
        <div class="home_bottom">
            <ul class="clearfix">
                <li>
                    <a href="../index.html">首页</a>
                </li>
                <li class="currentL">
                    <a href="video.html">视频</a>
                </li>
                <li>
                    <a href="strategy.html">攻略</a>
                </li>
                <li>
                    <a href="match.html">赛事</a>
                </li>
            </ul>
        </div>
</body>

</html>
<script src="../js/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        
        loop: true, // 循环模式选项
        // 如果需要分页器
        // pagination: {
        //     el: '.swiper-pagination',
        // },
        autoplay: {
            delay: 1000,
            disableOnInteraction: false,
        },
    })

    var videoNav = document.getElementsByClassName("video_nav")[0];
    var videoNavlis = videoNav.children[0].children;
    for (var i = 0; i < videoNavlis.length; i++) {
        videoNavlis[i].onclick = function(){
            for (var j = 0; j < videoNavlis.length; j++) {
                videoNavlis[j].className = ""
            }
            this.className = "video_current"
        }
        
    }

</script>